<template>
  <div class="header">
    <el-row>
      <el-col :offset="1" :span="12" class="logo">
        <img src="../../../assets/img/logo.png" alt="" />
        <span style="font-family: KaiTi;"> {{ $store.state.system.name }} </span>
        <span style="font-size: 16px">{{ $store.state.system.developer }}</span>
      </el-col>
      <el-col :span="10" class="info">
        <el-tooltip class="headerIcon" content="刷新">
          <svg @click="refresh()" t="1682320779850" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3117" width="16" height="16">
            <path d="M1007.2 262.4c-12.8-6.4-32 0-38.4 19.2l-25.6 70.4C904.8 256 847.2 179.2 757.6 128c-108.8-64-230.4-89.6-352-57.6C232.8 108.8 104.8 236.8 60 409.6 53.6 428.8 66.4 441.6 79.2 448 98.4 448 111.2 441.6 117.6 422.4c38.4-153.6 153.6-268.8 307.2-300.8 108.8-25.6 217.6-6.4 307.2 51.2 76.8 44.8 134.4 115.2 166.4 198.4l-76.8-32c-12.8-6.4-32 0-38.4 19.2-6.4 12.8 0 32 12.8 38.4l128 51.2c6.4 6.4 12.8 6.4 19.2 6.4 0 0 6.4 0 6.4 0 0 0 0 0 0 0 0 0 0 0 6.4 0 6.4 0 12.8-6.4 12.8-12.8L1026.4 294.4C1032.8 281.6 1020 268.8 1007.2 262.4zM949.6 576c-12.8-6.4-32 6.4-32 19.2-38.4 153.6-153.6 268.8-307.2 300.8-108.8 25.6-217.6 6.4-307.2-51.2-76.8-44.8-134.4-115.2-166.4-198.4l76.8 32c12.8 6.4 32 0 38.4-19.2 6.4-12.8 0-32-12.8-38.4L104.8 576C98.4 576 92 569.6 85.6 569.6c0 0-6.4 0-6.4 0 0 0 0 0 0 0 0 0 0 0-6.4 0C66.4 576 60 582.4 60 588.8L2.4 729.6c-6.4 12.8 0 32 19.2 38.4 12.8 6.4 32 0 38.4-19.2l25.6-70.4C124 768 181.6 844.8 271.2 896c108.8 64 230.4 89.6 352 57.6 172.8-38.4 307.2-172.8 345.6-345.6C975.2 595.2 962.4 582.4 949.6 576z" p-id="3118"></path>
          </svg>
        </el-tooltip>
        <el-tooltip
          class="headerIcon"
          :content="!isFullScreen ? '全屏' : '退出全屏'"
        >
          <svg @click="fullScreen" v-if="isFullScreen" t="1682320766254" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2977" width="16" height="16">
            <path d="M142.4 96.8l-44.8 44.8 173.6 174.4-68 68H384V203.2l-67.2 67.2zM752.8 316l173.6-174.4-44.8-44.8-174.4 173.6-67.2-67.2V384h180.8zM270.4 707.2l-169.6 170.4 44.8 49.6 170.4-174.4 68 68V640H203.2zM820.8 640H640v180.8l68-68 170.4 174.4 44.8-49.6-169.6-170.4z" p-id="2978"></path>
          </svg>
          <svg @click="fullScreen" v-else t="1682320751957" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2837" width="16" height="16">
            <path d="M240.8 196l178.4 178.4-45.6 45.6-177.6-179.2-68 68V128h180.8l-68 68z m133.6 408.8L196 783.2 128 715.2V896h180.8l-68-68 178.4-178.4-44.8-44.8zM715.2 128l68 68-178.4 178.4 45.6 45.6 178.4-178.4 68 68V128H715.2z m-65.6 476.8l-45.6 45.6 178.4 178.4-68 68H896V715.2l-68 68-178.4-178.4z" p-id="2838"></path>
          </svg>
        </el-tooltip>
        <el-dropdown trigger="click" style="cursor: pointer;">
          <span class="el-dropdown-link">
            {{ nickName }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <a href="javascript:void(0);">
                <svg t="1682320663226" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1994" width="16" height="16"><path d="M512 608c-160 0-288-128-288-288S352 32 512 32s288 128 288 288-128 288-288 288z m0-512c-121.6 0-224 102.4-224 224s102.4 224 224 224 224-102.4 224-224S633.6 96 512 96z" p-id="1995"></path><path d="M896 992c-19.2 0-32-12.8-32-32 0-192-160-352-352-352S160 768 160 960c0 19.2-12.8 32-32 32s-32-12.8-32-32c0-230.4 185.6-416 416-416s416 185.6 416 416c0 19.2-12.8 32-32 32z" p-id="1996"></path></svg>
                个人中心
              </a>
            </el-dropdown-item>
            <el-dropdown-item style="padding: 0;text-align: center;">
              <div @click="logout">
                <a href="javascript:void(0);"> 
                  <svg t="1682320875653" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4092" width="16" height="16"><path d="M476.15423525 512L476.15423525 81.81198697a35.84576475 35.84576475 0 0 1 71.6915295 0L547.84576475 512a35.80692859 35.80692859 0 1 1-71.6915295 0z m417.5662649-267.3092077a464.86869333 464.86869333 0 0 0-114.33362014-114.52780089l-0.11650846 0.11650844a35.76809245 35.76809245 0 1 0-41.04980858 58.720256c0.15534459 0.11650845 0.34952533 0.11650845 0.5048699 0.2330169 48.54518518 34.13697422 61.865984 47.45777303 96.27481128 96.58550043 124.7028717 178.10257541 81.28405808 424.51793541-96.85735348 549.22080712a395.42966045 395.42966045 0 0 1-452.36345364 0.07767229 393.02181925 393.02181925 0 0 1-96.74084503-96.97386193c-60.42904652-86.17741275-83.61422697-190.87966815-65.32240121-294.57218369s75.88583348-194.14190459 162.21859084-254.53211497c0.27185302-0.19418075 0.58254222-0.34952533 0.81555912-0.58254222l-0.19418075-0.19418075A35.80692859 35.80692859 0 0 0 244.72962845 130.2406637c-0.11650845 0.07767229-0.15534459 0.27185303-0.3106892 0.31068919l-0.03883614-0.03883614C33.849344 278.20638815-17.25902697 568.623104 130.27949985 779.3092077a464.86869333 464.86869333 0 0 0 114.33362014 114.52780089c155.88829867 109.16841245 369.72013037 115.38219615 534.65725156-0.07767229 210.8414483-147.65503525 262.0663277-438.26593185 114.4501286-649.068544z" p-id="4093"></path></svg>
                  退出登录
                </a>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //用户昵称
      nickName: sessionStorage.getItem("nickName"),
      //全屏标志
      isFullScreen: false,
    };
  },
  mounted() {
    window.addEventListener("keydown", this.keyDown, true);
  },
  methods: {
    keyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false;
        this.fullScreen(); //触发全屏的按钮
      }
    },
    // 全屏/退出全屏
    fullScreen() {
      if (!this.isFullScreen) {
        this.isFullScreen = true;
        const docElm = document.documentElement;
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        }
      } else {
        this.isFullScreen = false;
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      }
    },
    // 刷新
    refresh() {
      window.location.reload();
    },
    // 退出登录
    logout() {
      // this.$api.auth.logout().then();
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("nickName");
      this.$router.push({ path: "/admin/login" });
    },
  },
};
</script>

<style lang="less" scoped>
svg {
  position: relative;
  top: 3px;
}
.header {
  width: 100%;
  height: 60px;
  background: white;
  line-height: 60px;
  .logo {
    height: 60px;
    img {
      margin-bottom: -10px;
      height: 40px;
    }
    span {
      font-size: 24px;
    }
  }
  .info {
    height: 60px;
    text-align: right;
    .headerIcon {
      margin-right: 20px;
    }
  }
}
a{
  text-decoration: none;
  color: black;
}
</style>